<template>
	<div class="homepage">
		<el-carousel :height="img_height+'px'" :autoplay='false' class="carousel" indicator-position="outside" >
			<el-carousel-item v-for="(item, index) in img_src" :key="index" >
				<h3><img @load="img_load()" ref='img' :src="item" alt="" style="width: 100%;"></h3>
				<!-- <img @load="img_load()" ref='img' :src="item" alt="" style="width: 100%;"> -->
			</el-carousel-item>
		</el-carousel>
		<searchbar class="searchbar"></searchbar>
	</div>
</template>

<script>
	import {
		get_carousel
	} from '../../API/carousel.js';
	import searchbar from './searchbar.vue';
	
	export default {
		data() {
			return {
				img_src: [],
				img_height:Number,
			}
		},
		methods: {
			img_load(){
				this.$nextTick(() => {
					// console.log(this.$refs.img[0].height)
					this.img_height = this.$refs.img[0].height != 0 &&  this.$refs.img[0].height;
				})
			}
		},
		components:{
			searchbar,
		},
		created() {
			get_carousel().then(res => {
				// console.log(res);
				this.img_src = res.data.data.map(el => {
					return el.url;
				})
		
			})
			
		},
		mounted() {
			window.addEventListener('resize', () => {
				this.$nextTick(() => {
						this.img_load()
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-carousel__container{
		img{
			width: 100%;
			// height: 100%;
		}
	}
	.homepage{
		position: relative;
		.searchbar{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 2;
		}
	}
</style>